<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body> 
    <script>

        // 题目如下，请直接利用写好的方法，并且直接写在题目下方，要可以运行和输出，如第1题所示

        /*
        1、题目描述：
        找出元素 item 在给定数组 arr 中的位置
        输出描述:
        如果数组中存在 item，则返回元素在数组中的位置，否则返回 -1
        示例1  indexOf
        输入
        [ 1, 2, 3, 4,3 ], 3
        输出
        2
        
        function indexOf(arr, item) {
        
        }
        */
       // console.log(`======= 第1题 =======`)

            var arr=[1,2,3,4];
            function indexOf(arr, item) {
              
                    for (let index = 0; index < arr.length; index++) {
                        if (arr[index]==item) {
                            return index;
                        }
                    }
                    return -1;
                }
          
            console.log(indexOf([1,2,3,4],4));

        /*
        2、题目描述：
        计算给定数组 arr 中所有元素的总和 reduce() every()(some()) map() filter() forEach()
        输入描述:
        数组中的元素均为 Number 类型
        示例1
        输入
        
        [ 1, 2, 3, 4 ]
        输出
        
        10
        
        function sum(arr) {
        
        }
        */
    //     console.log(`======= 第2题 =======`);
    
        var arr=[1,2,3,4];
        function sum(arr) {
            var result =0;
            arr.forEach(function(value,index) {
                result+=value
            });
         return  result ;
       
      } 
      console.log(sum(arr));

        /*
        3、题目描述
        在数组 arr 末尾添加元素 item。不要直接修改数组 arr，结果返回新的数组
        示例1
        输入
        
        [1, 2, 3, 4],  10
        输出
        
        [1, 2, 3, 4, 10]
        
        function append(arr, item) {
            
        }
        */
    //     console.log(`======= 第3题 =======`);

       var arr=[1,2,3,4]
         function append(arr, item) {
                var newarr=JSON.parse(JSON.stringify(arr))
                newarr.push(item);
                return newarr
         }
            console.log(append([arr],10));

        /*
        4、题目描述
        合并数组 arr1 和数组 arr2。不要直接修改数组 arr，结果返回新的数组
        示例1
        输入
        
        [1, 2, 3, 4], ['a', 'b', 'c', 1]
        输出
        
        [1, 2, 3, 4, 'a', 'b', 'c', 1]
        
        function concat(arr1, arr2) {
        
        }
        */
        console.log(`======= 第4题 =======`);

        var arr1=[1, 2, 3, 4];
        var arr2=['a', 'b', 'c', 1];
        function concat(arr1, arr2) {
        var arr=[]
        arr=arr.concat(arr1)
        arr=arr.concat(arr2)
        return arr
    }
    console.log(concat((arr1),(arr2)));
        /*
        5、题目描述
        为数组 arr 中的每个元素求二次方。不要直接修改数组 arr，结果返回新的数组
        示例1
        输入
        
        [1, 2, 3, 4]
        输出
        
        [1, 4, 9, 16]
        
        function square(arr) {
        
        }
        */
        console.log(`======= 第5题 =======`);
        
        var arr=[1,2,3,4]
        function square(arr) {
        var newarr=[];
        return arr.map(values=>
                Math.pow(values,2)//返回values的2次
        )
       
    }
        console.log(arr);
        console.log(square(arr)); 

    </script>
  <script>
    // 6、题目描述
    //  定义一个计算圆面积的函数area_of_circle()，它有两个参数：
     
    //  r: 表示圆的半径；
    //  pi: 表示π的值，如果不传，则默认3.14
     
     function area_of_circle(r, pi) {
     
     }

     console.log(`======= 第6题 =======`);
     function Fun(r,pi=3.14){
         var ji;
        //  console.log(pi);
         ji=r*r*pi
        return ji;
     }
     console.log(Fun(2)); ;
  </script>
  
    
     <div>
            <input type="checkbox" name="aa" value="0" />0
            <input type="checkbox" name=" aa " value="1" />1
            <input type="checkbox" name=" aa " value="2" />2
            <input type="checkbox" name=" aa " value="3" />3
            <input type="button" onclick="abc()" value="提 交" />
            <div id="allselect"></div>
    </div>
    <script type="text/javascript">      
       // 7、题目描述
        // 用jQuery编程实现获取选中复选框值
        // HTML结构如下：
       
                  function abc() {
                    var arr=new Array();
                        $('input[type=checkbox]:checked').each(function (i) {
                            arr[i]=$(this).val();                        
                           }
                     )
                     var gar=arr.join(' ');
                     console.log((gar));
                  } 
              console.log(`======= 第7题 =======`);
         </script>    


 
 <div>
    <form name="a">
        <select name="a" size="1" onchange="_sel(this)">
        <option value="a">1</option>
        <option value="b">2</option>
        <option value="c">3</option>
        </select>
    </form>
</div> 

    <script>
    //      8、题目描述
    // 实现sel函数显示当前选项的文本和值 
       
        function _sel(a) {
                // function getOptionVal(){
                    console.log($('option:checked').text()+$('option:checked').val());;
            //  }
        }
             console.log(`======= 第8题 =======`); 
    </script>


 <div>
    用户名：<input type="text" id="username"/><br/>
    密  码：<input type="password" id="password"/><br/>
   确认密码：<input type="password" id="password1"/><br/>
    <button id="btnSubmit" type="button">提交</button><br/>
</div>
<script>
    // 9、题目描述
    // 要求用jQuery完成:  点击id为btn的按钮

    // a.判断id为username的输入是否为空，如果为空，则弹出“用户名不能为空”的提示。

    // b.判断id为password的输入字符串个数是否小于6位，如果小于6位，则弹出“你输入的密码长度不可以少于6位”的提示

    // HTML结构如下：
console.log(`======= 第9题 =======`);
    $(document).ready(function (event) {
       $('#btnSubmit').click(function () {
            if ($('#username').val()=='') {
                alert('用户名不能为空');
            }
            if ($('#password').val().length<6) {
                alert('你输入的密码长度不可以少于6位')
            }
       })     
    })

</script>


<table>
    <tr>
        <td>留言</td>
        <td id="number"> 0 </td>
    </tr>
    <tr>
        <td colspan=2>
            <textarea id="feedBack" onkeyup="test()" rows=6></textarea>
        </td>
    </tr>
</table>
<script>
// 10、题目描述

// 在下面的HTML文档中，编写函数test() ,实现如下功能：

// （1）当多行文本框中的字符数超过20个，只截取20个字符

// （2）在id为number的td中显示文本框的字符个数

// HTML结构如下：

function test(){
    var a=$('#number');
    var b=document.getElementById('feedBack');
    if (b.value.length>20) {
        b.value=b.value.substring(0,20)
    }
    a.text(b.value.length)
}

</script>


   
</body>
</html>